<template>
  <div v-if="!emptyShow">
    <van-grid v-if="$store.state.menus.length <= 8"
              :column-num="4"
              :icon-size="45"
              :border="false"
              clickable>
      <van-grid-item v-for="(menu, index) in $store.state.menus"
                     :key="index"
                     :icon="menu.logo"
                     :text="menu.menuName"
                     :to="menu.beanId"
                     :badge="menu.badge">
      </van-grid-item>
    </van-grid>
    <van-grid v-else
              :column-num="4"
              :border="false"
              clickable>
      <van-grid-item v-for="(menu, index) in $store.state.menus.slice(0, 7)"
                     :key="index"
                     :text="menu.menuName"
                     :to="menu.beanId"
                     :badge="menu.badge">
        <template #icon>
          <van-image :src="menu.logo"
                     width="45"
                     height="45" />
        </template>
      </van-grid-item>
      <van-grid-item text="更多"
                     to="menu">
        <template #icon>
          <van-image src="images/index/icon_more.svg"
                     width="45"
                     height="45" />
        </template>
      </van-grid-item>
    </van-grid>
  </div>
  <div v-else>
    <van-empty description="该角色无任何权限">
      <template #image>
        <div class="empty-image">
          <img src="/images/detail/icon_empty.png" />
        </div>
      </template>
    </van-empty>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs, watch } from 'vue'
import { useStore } from 'vuex'
import { refreshMenuBadge } from '@/hooks/useMenu'
export default {
  setup () {
    const store = useStore()
    const state = reactive({
      emptyShow: false
    })
    const computeEmpty = (menus) => {
      state.emptyShow = (menus.length === 0)
    }
    refreshMenuBadge()
    onMounted(() => {
      computeEmpty(store.getters.menus)
    })
    watch(
      () => store.getters.menus,
      (menus, preMenus) => {
        computeEmpty(menus)
      },
    )
    watch(
      () => store.getters.currentRoleName,
      () => {
        refreshMenuBadge()
      },
    )
    return {
      // menuArr,
      ...toRefs(state)
    }
  }
}
</script>

<style scoped>
.van-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 10px;
}

::v-deep(.van-empty__image) {
  width: 90px;
  height: 92px;
  padding-top: 12px;
}

::v-deep(.van-empty__description) {
  color: #d1d1d1;
}
</style>